<template><!---->
	<div>
    <div class="header" style="margin:15px 0">
      <span v-if="buttonData.length>0">
        <Button  v-for="(item,index) in buttonData" :disabled="item.disabled" ghost :key="'btn'+index" type="primary"
                 @click="item.fnName"
                 style="margin-right:15px;">{{item.name}}</Button>
      </span>
      <span v-if="selectData.length>0">
        <Select filterable   filterable v-for="(item,index) in selectData" :key="'sel'+index" style="width:150px;margin-right:15px;" @on-change="item.fnName" clearable remote :placeholder="item.placeholder" allow-creat @on-create>
          <Option v-for="items in item.optionsValue" :value="items.id"  :key="items.id" :title="item.name">{{ items.name }}</Option>
        </Select>
      </span>
      <span v-if="inputData.length>0"><!--  item.fnName(item.val)-->
        <Input  v-for="(item,index) in inputData" style="width:180px;margin-right:15px;" :key="'input'+index" :placeholder="item.placeholder" :value="item.val" v-model.trim="item.val" @on-change="item.fnName($event.currentTarget.value)" @on-search="item.fnName"/>
      </span>
     <span v-if="datePickData.isShow">
       <DatePicker :editable="false" format="yyyy-MM-dd HH:mm" type="daterange" placeholder="Select date" style="width: 200px"
                   @on-change="datePickData.fnName"></DatePicker>
     </span>
    <Page :total=	"PageData.total" :current="PageData.currentPage" :page-size="PageData.pageSize"
          :page-size-opts="pageSizeOptions" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"
           style="float: right;" v-if="options.pagePos !== 'bottom' && !hidePage">
    </Page>
    </div>
    <div class="contents">
      <!--<Table border :columns="tableData.listCol" :data="tableData.listData" class="drillsTable"></Table>-->
      <TableList 
        :showPage="options.pagePos == 'bottom' ? true : false"
        :showLoading="options.showLoading"
        :columns="tableData.listCol" 
        :data="tableData.listData" 
        :page ="PageData.currentPage"
        :size ="PageData.pageSize"
        :loading="options.loading"
        :noDataText="noDataText"
        :showSelectTag="options.Table.showSelectTag"
        :selection.sync="options.Table.selection">
      </TableList>
    </div>
  </div>
</template>

<script>
 	// import CardList from '@/view/drill_compete/cardList/cardList'
  // import propsMixin from '@/components/common/table-list/mixin'
	export default {
    name: 'tableList',
    props:['options','hidePage', 'noDataText'],
    // mixins:[propsMixin],
    // components:{CardList},
	data(){
    return {
      pageSizeOptions:[10,20],
      inputData:this.options.Input,
      buttonData:this.options.Button,
      selectData:this.options.Select,
      datePickData:this.options.DatePicker,
      PageData:this.options.Page,
      tableData:this.options.Table,
      throttleTime:{
      	pre:0,
      	now:0
      }
    }
	},
	filters:{

	},
	mounted(){

	},
  methods:{
    resetPage() {
        this.$set(this.PageData, 'currentPage', 1)
        this.$set(this.PageData, 'pageSize', 10)
    },
    changePage(val){
      if(typeof this.$parent[this['options']['Fnlist']] === 'function'){
        this.$parent[this['options']['Fnlist']](val,null);
      }else{
        this['options']['fnlists'](val,null)
      }
    },
    changePageSize(val){
      if(this.PageData.total > 0){
          let maxPage = Math.ceil(this.PageData.total / val);
          if(maxPage < this.PageData.currentPage){
              this.changePage(maxPage);
              return
          }
      }
      if(typeof this.$parent[this['options']['Fnlist']] === 'function'){
        this.$parent[this['options']['Fnlist']](null,val);
      }else{
        this['options']['fnlists'](null,val)
      }
    },
    throttle(e,call,wait){
    	if(this.throttleTime.pre == 0){
    		this.throttleTime.pre = Date.now();
			call.fnName(e.currentTarget.value);
    	}else{
    		this.throttleTime.now = Date.now();
    		if( this.throttleTime.now - this.throttleTime.pre >= wait){
    			call.fnName(e.currentTarget.value);
//	            fn.apply(context,args);
	            this.throttleTime.pre = Date.now();
	        }
    	}
	}
	// searchInput(item,val){
    //   
    //   this.$emit('setSearch',{[item.fnName]:val});
    // }
    },
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    padding: 10px;
    margin-bottom: 10px;
  }
  .contents{
    clear:both
  }
</style>
